<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>


    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />

    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id='app'>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.key" placeholder="请输入商品名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <el-button type="primary" @click="getActive()">秒杀活动列表
                </el-button>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="id" header-align="center" align="center" label="订单编号">
            </el-table-column>
            <el-table-column prop="userId" header-align="center" align="center" label="用户id">
            </el-table-column>
            <el-table-column prop="goodsId" header-align="center" align="center" label="商品id">
            </el-table-column>
            <el-table-column prop="deliveryAddrId" header-align="center" align="center" label="收获地址id">
            </el-table-column>
            <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称">
            </el-table-column>
            <el-table-column prop="goodsCount" header-align="center" align="center" label="商品数量">
            </el-table-column>
            <el-table-column prop="goodsPrice" header-align="center" align="center" label="商品单价">
            </el-table-column>
            <el-table-column prop="goodsChannel" header-align="center" align="center" label="1.pc 2.android 3.ios">
            </el-table-column>
            <el-table-column prop="status" header-align="center" align="center" label="订单状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==0">
                        未支付
                    </span>
                    <span v-if="scope.row.status==1">
                        已支付
                    </span>
                    <span v-if="scope.row.status==2">
                        已发货
                    </span>
                    <span v-if="scope.row.status==3">
                        已收货
                    </span>
                    <span v-if="scope.row.status==4">
                        已退款
                    </span>
                    <span v-if="scope.row.status==5">
                        已完成
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="createDate" header-align="center" align="center" label="订单创建时间">
            </el-table-column>
            <el-table-column prop="payDate" header-align="center" align="center" label="支付时间">
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==1 || scope.row.status==4">
                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)" disabled="true">立即支付
                        </el-button>
                        <el-button type="text" size="small" @click="deleteHandle(scope.row.id)" disabled="true">取消订单
                        </el-button>
                    </span>
                    <span v-if="scope.row.status!=1 && scope.row.status!=4">
                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)" >立即支付
                        </el-button>
                        <el-button type="text" size="small" @click="deleteHandle(scope.row)" >取消订单
                        </el-button>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[3, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                baseUrl: "http://localhost:88/api",
                dataForm: {
                    key: '',
                    userId: localStorage.getItem("id"),
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 3,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false
            }
        },
        //方法集合
        methods: {
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                axios.get(this.baseUrl + '/shopping/orderinfo/list?page=' + this.pageIndex + '&limit=' + this.pageSize + '&userId=' + this.dataForm.userId+'&key='+this.dataForm.key).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list
                        this.totalPage = data.page.totalCount
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            getActive() {
                location.href = "activeList.html"
            },
            //支付
            addOrUpdateHandle(data) {
                axios.post(this.baseUrl + '/shopping/orderinfo/payorder', data).then(({ data }) => {
                    if (data && data.code == 0) {
                        const div = document.createElement('divform');
                        div.innerHTML = data.connect; // data就是接口返回的form 表单字符串
                        document.body.appendChild(div);
                        let len = document.forms.length - 1
                        document.forms[len].setAttribute('target', '_blank') // 新开窗口跳转
                        document.forms[len].submit();

                    } else {
                        this.$message.error(data.msg)
                    }
                })
            },
            deleteHandle(data) {
                axios.post(this.baseUrl+'/shopping/orderinfo/update',data).then(({data})=>{
                    if(data.code==0){
                        this.$message({
                            showClose: true,
                            message: '取消订单成功',
                            type: 'success'
                        });
                        this.getDataList();
                    } else {
                        this.$message.error("取消订单失败");
                    }
                })
            }
        },
        created() {
            this.getDataList()
        },
    })
</script>

</html>